<template>
    <div id="pulpTest">
        <!-- 查询 -->
        <el-popover placement="bottom-start" width="900" style="box-shadow: 0 0 8px rgba(0,0,0,.5);" trigger="click">
            <el-form :inline="true" :model="searchList" label-width="75px" class="demo-ruleForm">
                <el-form-item label="小样号" style="margin-bottom: 0;"><el-input v-model="searchList.smallNo" style="width: 100px;"></el-input></el-form-item>
                <el-form-item label="浆员姓名" style="margin-bottom: 0;"><el-input v-model="searchList.name" style="width: 100px;"></el-input></el-form-item>
                <el-form-item label="采集地点" style="margin-bottom: 0;"><el-select v-model="searchList.gatheringPlace" style="width: 100px;">
                    <el-option value="" label="【空】"></el-option>
                    <el-option value="0" label="站内"></el-option>
                    <el-option value="1" label="站外"></el-option>
                </el-select></el-form-item>
                 <el-date-picker v-model="searchList.time" type="date" placeholder="选择日期"></el-date-picker>
                <el-button type="primary" @click="searchData">提交</el-button>
            </el-form>
            <el-button slot="reference" type="primary">查询</el-button>
        </el-popover>

        <!-- 表格 -->
        <el-table :data="tableData" stripe border class="company-table" :height="tableHeight" style="width: 100%;" :header-cell-style="getRowClass" v-loading="tableLoading">
            <el-table-column fixed type="index" label="*" sortable align="center" min-width="40"></el-table-column>
            <el-table-column prop="sampleNo" label="小样号" sortable min-width="130"></el-table-column>
            <el-table-column prop="name" label="浆员姓名" sortable min-width="110"></el-table-column>
            <el-table-column prop="authMethod" label="认证方式" sortable min-width="130"></el-table-column>
            <el-table-column prop="gatheringPlaceName" label="采集地点" sortable min-width="110"></el-table-column>
            <el-table-column prop="sampleType" label="小样类型" sortable ></el-table-column>
            <el-table-column prop="createNurseName" label="创建护士" sortable min-width="110"></el-table-column>
            <el-table-column prop="recodeStatusName" label="记录状态" sortable min-width="110"></el-table-column>
            <el-table-column prop="inspectionResultName" label="化检结果" sortable min-width="110"></el-table-column>
            <el-table-column prop="yms" label="液面上" sortable ></el-table-column>
            <el-table-column prop="ymx" label="液面下" sortable ></el-table-column>
            <el-table-column prop="zsykdz" label="折射仪刻度值" sortable min-width="92"></el-table-column>
            <el-table-column fixed="right" label="操作" sortable align="center" min-width="75">
                <template slot-scope="scope">
                    <el-button  @click="updateDialog(scope.row)" type="text" size="small"> {{ scope.row.inspectionStatus !='1' ? '编辑' : '详情'  }} </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.currentPage" :page-sizes="[10, 15,20, 25,30,50, 100]" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination>

        <!-- 详情 -->
        <el-dialog title="详细信息" :visible.sync="isDialog" width="1050px" top="60px"  :close-on-click-modal="false">
            <div :style="dialogHeight">
                <h3 class="dialog-plate-title">
                    <span v-if="basicInfo.gatheringPlace==1">站外小样录入信息</span>
                    <span v-else>基本信息</span>
                </h3>
                <!-- 浆员基本信息 -->
                 <pulpwork-info  v-if="basicInfo.gatheringPlace==0" v-bind:cardid="dialogList.providerNo"></pulpwork-info>
                <el-row  v-else>
                    <el-col :span="12">
                        <el-form :inline="true" :model="basicInfo" label-width="120px" class="demo-ruleForm">
                            <el-form-item class="inputNoMb" ><p style="width: 340px;text-align: center;font-size: 16px;font-weight: bold;"></p></el-form-item>
                            <el-form-item class="inputNoMb" label="姓名"><el-input v-model="basicInfo.name" disabled></el-input></el-form-item>
                            <el-form-item class="inputNoMb" label="年龄" ><el-input v-model="basicInfo.age" disabled></el-input></el-form-item>
                            <el-form-item class="inputNoMb" label="性别" ><el-input v-model="basicInfo.sex" disabled></el-input></el-form-item>
                            <el-form-item class="inputNoMb" label="身份证号"><el-input v-model="basicInfo.idNo" disabled></el-input></el-form-item>
                            <el-form-item class="inputNoMb" label="电话" ><el-input v-model="basicInfo.phone" disabled></el-input></el-form-item>
                            <el-form-item class="inputNoMb" label="地址"><el-input v-model="basicInfo.address" disabled></el-input></el-form-item>
                        </el-form>
                    </el-col>
                </el-row>
                <h3 class="dialog-plate-title" style="margin-top: 20px;"><span>小样信息</span></h3>
                <el-form :inline="true" :model="dialogList" label-width="120px" class="demo-ruleForm">
                    <el-form-item label="小样号"><el-input v-model="dialogList.sampleNo" disabled></el-input></el-form-item>
                    <el-form-item label="记录状态"><el-input v-model="dialogList.recodeStatusName" disabled></el-input></el-form-item>
                    <el-form-item label="采集时间"><el-date-picker :disabled="dialogList.recodeStatus == '1'" v-model="dialogList.gatheringTime" type="datetime"></el-date-picker></el-form-item>
                    <el-form-item label="记录时间"><el-input v-model="dialogList.recodeTIme" disabled></el-input></el-form-item>
                    <el-form-item label="认证方式"><el-input v-model="dialogList.authMethod " disabled></el-input></el-form-item>
                    <el-form-item label="创建护士"><el-input v-model="dialogList.createNurseName" disabled></el-input></el-form-item>
                    <el-form-item label="采集地点"><el-input v-model="dialogList.gatheringPlaceName" disabled></el-input></el-form-item>
                    <el-form-item label="小样类型"><el-input v-model="dialogList.sampleType" disabled></el-input></el-form-item>
                    <el-form-item label="液面上"><el-input v-model="dialogList.yms" disabled></el-input></el-form-item>
                    <el-form-item label="液面下"><el-input v-model="dialogList.ymx" disabled></el-input></el-form-item>
                    <el-form-item label="折射仪刻度值"><el-input v-model="dialogList.zsykdz" disabled></el-input></el-form-item>
                </el-form>

                <h3 class="dialog-plate-title" style="margin-top: 20px;"><span>化检项目</span></h3>
                <el-form  :inline="true" :model="dialogList" label-width="120px" class="demo-ruleForm">
                    <el-form-item label="全血比重"><el-select v-model="dialogList.wholeBloodLevel" class="selectW200"><el-option value="" label="【空】"></el-option><el-option v-for="item in codeData18" :key="item.code" :value="item.code" :label="item.name"></el-option></el-select></el-form-item>
                    <el-form-item label="蛋白含量"><el-input v-model="dialogList.proteinLevel" ></el-input></el-form-item>
                    <el-form-item label="血清蛋白含量"><el-input v-model="dialogList.serumProteinLevel" ></el-input></el-form-item>
                    <el-form-item label="血红蛋白含量"><el-select v-model="dialogList.hemoglobinLevel" class="selectW200"><el-option value="" label="【空】"></el-option><el-option v-for="item in codeData17" :key="item.code" :value="item.code" :label="item.name"></el-option></el-select></el-form-item>
                    <el-form-item label="HBsAg"><el-select v-model="dialogList.hbsAg" class="selectW200"><el-option value="" label="【空】"></el-option><el-option v-for="item in codeData20" :key="item.code" :value="item.code" :label="item.name"></el-option></el-select></el-form-item>
                    <el-form-item label="抗-HCV"> <el-select v-model="dialogList.hcv" class="selectW200"><el-option value="" label="【空】"></el-option><el-option v-for="item in codeData20" :key="item.code" :value="item.code" :label="item.name"></el-option></el-select></el-form-item>
                    <el-form-item label="梅毒"><el-select v-model="dialogList.syphilis" class="selectW200"><el-option value="" label="【空】"></el-option><el-option v-for="item in codeData20" :key="item.code" :value="item.code" :label="item.name"></el-option></el-select></el-form-item>
                    <el-form-item label="抗-HIV"><el-select v-model="dialogList.hiv" class="selectW200"><el-option value="" label="【空】"></el-option><el-option v-for="item in codeData20" :key="item.code" :value="item.code" :label="item.name"></el-option></el-select></el-form-item>
                    <el-form-item label="ALT"><el-select v-model="dialogList.alt" class="selectW200"><el-option value="" label="【空】"></el-option><el-option v-for="item in codeData21" :key="item.code" :value="item.code" :label="item.name"></el-option></el-select></el-form-item>
                    <el-form-item label="血型"><el-select v-model="dialogList.bloodType" class="selectW200"><el-option value="" label="【空】"></el-option><el-option v-for="item in codeData12" :key="item.code" :value="item.code" :label="item.name"></el-option></el-select></el-form-item>
                    <el-form-item label="化检备注"><el-input v-model="dialogList.inspectionRemark" type="textarea" :rows="1" style="width: 534px;"></el-input></el-form-item>
                </el-form>

                <h3  class="dialog-plate-title" style="margin-top: 20px;"><span>化检详情</span></h3>
                <el-form  :inline="true" :model="dialogList" label-width="120px" class="demo-ruleForm">
                    <el-form-item label="化检结果"><el-select v-model="dialogList.inspectionResult" class="selectW200"><el-option value="" label="【空】"></el-option><el-option v-for="item in codeData18" :key="item.code" :value="item.code" :label="item.name"></el-option></el-select></el-form-item>
                    <el-form-item label="化验开始时间"><el-date-picker v-model="dialogList.inspectionStartTime" type="datetime"></el-date-picker></el-form-item>
                    <el-form-item label="化验结束时间"><el-date-picker v-model="dialogList.inspectionEndTime   " type="datetime"></el-date-picker></el-form-item>
                    <el-form-item label="记录处理时间"><el-date-picker v-model="dialogList.recodeEndTime" type="datetime"></el-date-picker></el-form-item>
                    <el-form-item label="化检记录人"><el-input v-model="dialogList.inspectionRecodePersonName" disabled></el-input></el-form-item>
                    <el-form-item label="记录创建时间"><el-input v-model="dialogList.recodeStartTime" disabled></el-input></el-form-item>
                </el-form>
            </div>
            <div slot="footer">
                <el-button v-if="dialogList.inspectionStatus !='1' " type="primary" @click="submitDialog">提交</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import api from '@/axios/api.js'
import pulpworkInfo from 'operationManage/components/pulpworkInfo.vue'
    export default {
        name: "sample",
        components:{
            pulpworkInfo
        },
        data(){
            return {
                tokenId: sessionStorage.getItem("tokenId"),
                tableHeight: document.documentElement.clientHeight - 160,
                tableData:[],
                tableLoading:false,
                // 查询
                searchList:{
                    name:'',//浆员姓名
                    smallNo:'',//小样号
                    gatheringPlace:'',//采浆地点
                    time:''//日期
                },
                //分页相关参数
                pagination:{
                    currentPage:1,
                    pageSize:10,
                    total:0
                },
                //详情
                isDialog:false,
                dialogTitle:'',
                imageUrl:true,
                dialogList:{
                    address: '',
                    cardId: '',
                    age: '',
                    alt: '',
                    altName: '',
                    authMethod: '',
                    bloodType: '',
                    bloodTypeName: '',
                    createNurse: '',
                    createNurseName: '',
                    gatheringPlace: '',
                    gatheringTime: '',
                    hbsAg: '',
                    hbsAgName: '',
                    hcv: '',
                    hcvName: '',
                    hemoglobinLevel: '',
                    hemoglobinLevelName: '',
                    hiv: '',
                    hivName: '',
                    idAddress: '',
                    idNo: '',
                    inspectionEndTime: '',
                    inspectionRecodePerson: '',
                    inspectionRecodePersonName: '',
                    inspectionRemark: '',
                    inspectionResult: '',
                    inspectionResultName: '',
                    inspectionStartTime: '',
                    inspectionStatus: '',
                    name: '',
                    phone: '',
                    proteinLevel: '',
                    proteinLevelName: '',
                    providerNo: '',
                    recodeEndTime: '',
                    recodeNo: '',
                    recodeStartTime: '',
                    recodeStatus: '',
                    recodeStatusName: '',
                    recodeTIme: '',
                    sampleNo: '',
                    samplePhoto: '',
                    sampleType: '',
                    serumProteinLevel: '',
                    sex: '',
                    syphilis: '',
                    syphilisName: '',
                    threshold: '',
                    wholeBloodLevel: '',
                    wholeBloodLevelName: '',
                    yms: '',
                    ymx: '',
                    zsykdz: '',
                },
                basicInfo:{
                    address: "",
                    age: "",
                    id: "",
                    idNo: "",
                    name: "",
                    phone: "",
                    photo: "",
                    sex: "",
                    sexName:'',
                    gatheringPlace:0,
                },
                dialogHeight: {
                    height: document.documentElement.clientHeight - 230+ 'px',
                    overflowY: 'auto',
                },
                codeData17:[],/** 血红蛋白含量*/
                codeData12:[],/**血型 */
                codeData18:[],/** 合格状态*/
                codeData20:[],/**化检结果 */
                codeData21:[]/** alt检测结果*/


            }
        },
        created() {
            let self = this;
            self.getData();
            api.getCodeData(17).then(res=>{
                self.codeData17=res.content;
            })
            api.getCodeData(12).then(res=>{
                self.codeData12=res.content;
            })
            api.getCodeData(18).then(res=>{
                self.codeData18=res.content;
            })
             api.getCodeData(20).then(res=>{
                self.codeData20=res.content;
            })
             api.getCodeData(21).then(res=>{
                self.codeData21=res.content;
            })
        },
        methods: {
            getData() {
                let self = this;
                self.tableLoading = true;
                self.tableData=[];
                let getData={
                    time:self.timestampToTime(self.searchList.time?self.searchList.time:new Date()).split(' ')[0],
                    name:self.searchList.name,
                    smallNo:self.searchList.smallNo,
                    currentPage:self.pagination.currentPage,
                    gatheringPlace:self.searchList.gatheringPlace,
                    pageSize:self.pagination.pageSize
                };
               api.samplesList(getData).then(res=>{
                    self.tableLoading=false;
                    res.content.records.forEach(item => {
                        item.gatheringPlaceName = item.gatheringPlace==1?'站外':'站内';
                        self.tableData.push(item);
                    });
                    self.pagination.total = res.content.total;
               },error=>{
                   self.tableLoading=false;
               });
            },
            searchData(){
                this.pagination.currentPage=1;
                this.getData();
            },
            insertDialog(){
                this.isDialog = true;
                this.dialogTitle = '添加';
            },
            updateDialog(row){
                let self =this;
                self.isDialog = true;
                self.dialogTitle = '详情信息';
                self.dialogList = row;
                self.basicInfo.gatheringPlace=row.gatheringPlace;
            },
            submitDialog(){
                let _this = this;
                _this.dialogList.gatheringTime = _this.timestampToTime( _this.dialogList.gatheringTime);
                _this.dialogList.inspectionStartTime = _this.timestampToTime( _this.dialogList.inspectionStartTime);
                _this.dialogList.inspectionEndTime = _this.timestampToTime( _this.dialogList.inspectionEndTime);
                _this.dialogList.recodeEndTime = _this.timestampToTime( _this.dialogList.recodeEndTime);
                let param = new URLSearchParams();
                param.append('plasmaSamples', JSON.stringify(_this.dialogList));
                api.plasmaSamplesUpdate(param).then(res=>{
                        _this.isDialog = false;
                        _this.getData();
                })
                // this.$http({
                //     url:'/api/adscm/application/plasmaSamples/update?tokenId='+_this.tokenId,
                //     method: 'post',
                //     headers: {'X-Requested-With': 'XMLHttpRequest'},
                //     data:param
                // }).then(function (res) {
                //     console.log( res.data )

                // }).catch(function (catchres) {
                //     _this.$message.error("加载失败！请重新加载...");
                // })
            },

            handleSizeChange(size) {
                this.pagination.pageSize = size;
                this.getData();
            },
            handleCurrentChange(currentPage) {
                this.pagination.currentPage = currentPage;
                this.getData();
            }
        },
    }
</script>

<style scoped>

    .inputNoMb{
        margin-bottom: 5px;
    }
    .selectW200{
        width: 200px;
    }

</style>

